<template>
	<view style="background-color: rgb(243,243,243);">
		<view >
			<view style="padding: 0 30rpx;background-color: rgb(255,255,255);">
				<view style="width: 80%;line-height: 68rpx; font-size: 47rpx; ">
					{{news.title}}
				</view>
				<view style="margin: 10rpx 0; display: flex;">
					
						<!-- <img :src="users.find(v => v.nickName===news.author)?users.find(v => v.nickName===news.author).portrait:" > -->
					<!-- <image style="width: 80rpx;height: 80rpx; border-radius: 50%; margin-right: 10rpx;" :src="users.find(v => v.nickName===news.author)?users.find(v => v.nickName===news.author).portrait:require('@/static/defaultPortrait.png')" mode=""></image> -->
					<view >
						<view style="font-size: 28rpx; color: rgb(171,175,178);">{{news.author}}</view>
						<view style="font-size: 28rpx; color: rgb(171,175,178);">{{news.time}}</view>
					</view>
					
				</view>
				<mp-html :content="news.content ? news.content : '<p>新闻有标无内容</p>'" />
			</view>
			<!-- 分界 -->
			<view class="comment"
				style="margin-top: 20rpx; background-color: rgb(255,255,255);padding: 0 30rpx;border-bottom: solid 1rpx rgb(228, 228, 228)">
				<span
					style="border-bottom: solid 1rpx rgb(242,158,182);color: rgb(242,158,182);display: inline-block;height: 60rpx; line-height: 60rpx;">评论</span>
			</view>
			<!-- 评论区 -->
			<view>
				<view
					style=" background-color: rgb(255,255,255);padding: 30rpx 30rpx;border-bottom: solid 1rpx rgb(228, 228, 228);display: flex;"
					v-for="item in comments" :key="item.id">
					<image style="width: 70rpx;height: 70rpx; border-radius: 50%; margin-right: 10rpx;" :src="users.find(v => v.id===item.userId)?users.find(v => v.id===item.userId).portrait:require('@/static/toux.png')" mode=""></image>
					
					<view style="flex: 1;">
						<view style=" font-size:36rpx;color:  rgb(0,86,179);margin-bottom: 10rpx;">
							{{item.username}}
						</view>
						<view style="font-size: 36rpx; color: rgb(25,25,25);margin-bottom: 10rpx;">
							{{item.content}}
						</view>
						<view style="display: flex;justify-content: space-between ;margin-bottom: 10rpx;">
							<view style="font-size: 26rpx; color: rgb(171,175,178); ">
								{{item.time}}
							</view>
									
							<uni-icons type="chat-filled" size="22" color="rgb(0,86,179)"
								@click="preReplyTarget(item.id,item.username)"></uni-icons>
						</view>
						<!-- 多级评论 -->
						<view v-if="item.children.length != 0" style="background-color: rgb(248,249,250); padding: 20rpx; border-radius: 10rpx;">
							<view v-for="item2 in item.children" :key="item2.id">
								<view style="margin-bottom: 6rpx;">
									<span style="color:rgb(0,86,179) ; margin-right: 15rpx;"
										@click="preReplyTarget(item2.pid,item2.username)">{{item2.username}}</span><span>回复</span><span
										style="color:rgb(0,86,179) ;margin: 0 15rpx;">@{{item2.target}}</span>
									<span>:&nbsp;{{item2.content}}</span>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="comments.length!=0"
					style=" padding: 0 30rpx;background-color: rgb(255,255,255); height: 250rpx; text-align: center; line-height: 200rpx;">
					已经到底啦！
				</view>
			</view>
			
			<!-- 评论区为空时 -->
			<view v-if="comments.length === 0"
				style=" padding: 0 30rpx;background-color: rgb(255,255,255); height: 250rpx; text-align: center; line-height: 200rpx;">
				暂时没有评论哦！
			</view>
		</view>
		
		<!-- 底部评论输入框 -->
		<view
			style="position: fixed;bottom: 0;  width: 100%; box-shadow: 0 0 100rpx 3rpx #d4d4d4;  padding: 10rpx 30rpx; background-color: rgb(255,255,255);display: flex;" >
			
			<view style="background-color: rgb(245,245,245); border-radius: 25rpx; width: 70%;display: flex;height: 66rpx; padding:0 20rpx 0 30rpx;">
				<input :focus="isFocus" style="background-color: rgb(245,245,245);height: 66rpx;  flex: 1;"
					:placeholderStyle="placeholderStyle" :placeholder="changePlace" v-model="content" @input="existInput" @blur="beforeSubmitLeave" />
				<uni-icons v-show="isInput" @click="clear" type="clear" size="25" color="rgb(196,196,196)" style="margin-left:0rpx;line-height: 66rpx;"
					></uni-icons>
			</view>
			
			<!-- <input :focus="isFocus"
				style="background-color: rgb(245,245,245); border-radius: 25rpx; width: 70%; height: 66rpx; padding:0 30rpx;"
				:placeholderStyle="placeholderStyle" :placeholder="changePlace" v-model="content" @input="existInput" @blur="beforeSubmitLeave" /> -->
			<view :style="{color: fff}" style="margin-left: 20rpx; line-height:66rpx;" @click="submitComment">发 布</view>
			
		</view>

	</view>

</template>

<script>
	import mpHtml from '@/uni_modules/mp-html/components/mp-html/mp-html.vue'
	export default {
		components: {
			mpHtml
		},
		data() {
			return {
				form: {
					username: '',
					userId: null,
					newId: null,
					content: '',
					pid: null,
					target: ''
				},
				isInput:false,
				content: '',
				changePlace: '发一条友善的评论',
				comments: [],
				news: {},
				fff: 'rgb(196,196,196)',
				placeholderStyle: "color:rbg(196,196,196);font-size:14px;text-align:center;",
				user: {},
				newId: null,
				isFocus: false,
				users:[],
			}
		},
		onLoad(option) {
			this.user = uni.getStorageSync('user');
			wx.setNavigationBarTitle({
				title: option.newTitle
			});
			this.newId = option.newId;
			this.request({
				url: `/news/${option.newId}`
				// url: '/news/10'
			}).then(res => {
				this.news = res.data;

			});
			this.request({
				url: '/user'
			}).then(res => {
				this.users = res.data;
			
			});

			this.loading();
		},
		methods: {
			loading() {

				this.request({
					url: `/comment/${this.newId}`
					// url: '/comment/10'
				}).then(res => {

					this.comments = res.data;

				});
			},
			// 为了评论或回复内容未提交转而改变对象后的提交正确而清除行为；
			clear(){
					this.form = {
						...this.form,
						...{
							pid: null,
							target: '',
							content: ''
						}
					};
					this.content='';
					this.isInput=false;
			},
			preReplyTarget(pid, username) {
				
				this.changePlace = '回复@' + username + '：';
				//本自己但未提交，后回复，所以需要清楚
				this.content = '';
				//确定回复对象
				this.form = {
					...this.form,
					...{
						pid: pid,
						target: username
					}
				};
				this.isFocus = true;
			},
			existInput: function(e) {
				if (e.detail.value != '') {
					this.fff = 'rgb(242,158,182)';
					this.isInput=true;
				} else {
					this.fff = 'rgb(196,196,196)';
					this.isInput=false;
				}
			
			},
			beforeSubmitLeave: function(e){
				this.changePlace = '发一条友善的评论';
				this.isFocus = false;
				this.fff = 'rgb(196,196,196)';
			},
			
			submitComment() {
				this.form = {
					...this.form,
					...{
						username: this.user.username,
						userId: this.user.id,
						// newId: 10,
						newId:this.newId,
						content: this.content
					}
				};
				this.request({
					url: '/comment',
					method: 'POST',
					data: this.form
				}).then(res => {
					if (res.code === '0') {
						uni.showToast({
							title: '评论成功'
						})
						//提交后清除回复对象
						this.form = {
							...this.form,
							...{
								pid: null,
								target: '',
								content: ''
							}
						};
						this.isInput=false;
						this.content='';
						this.loading();
					}
				});
			},

		}
	}
</script>

<style lang="scss">
	* {
		padding: 0;
		margin: 0;

	}
</style>
